<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>平台ip统计</title>
    <#include "/header.html">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <script src="${request.contextPath}/statics/plugins/layui/layui.all.js"></script>
    <link rel="stylesheet" href="${request.contextPath}/statics/css/chartStyle.css">
    <script src="${request.contextPath}/statics/js/echarts.min.js"></script>
    <script src="${request.contextPath}/statics/js/transData.js"></script>
</head>
<style>
    .bootstrap-select{
        width: 100% !important;
    }
    .glyphicon-arrow-up{
        padding-left: 10px;
        color: red;
    }

    .glyphicon-arrow-down{
        padding-left: 10px;
        color: #76d471;
    }
    #tableData{
        margin: 20px 0;
    }
    #tableData td{
        text-align: center;
        /*max-width: 200px;*/
        /*min-width: 200px;*/
    }
    #tableData th{
        text-align: center;
        /*max-width: 200px;*/
        /*min-width: 200px;*/
    }
    .tableCon{
        width: 100%;
        overflow-x: auto;
    }
</style>
<body>
<div id="index">
    <div class="layui-container" style="width: 100%;">
        <div class="layui-row" style="margin-top: 10px;">
            <div class="layui-col-md2 ">
                <select class="selectpicker" id="platformId"  title="请选择平台名称"   style="width:100%;" >

                </select>
            </div>
            <div class="layui-col-md2" style="padding-left: 20px;">
                <input type="text" class="form-control" required  id="TimeDate"  placeholder="请输入查询日期"  autocomplete="off" >
             </div>

            <div class="layui-col-md3 " style="padding-left: 20px;">
                <div class="btn btn-default" id="search" onclick="platformIpCountPage.reload()">查询</div>
            </div>
    </div>
</div>
    <div class="col-sm-12 select-info table-striped">
        <div class="tableCon">
        <table class="table table-bordered table-hover" id="tableData">
            <thead>
            <tr>
                <th>去重后IP数</th>
                <th>未去重IP数</th>
                <th>去重后UV数</th>
                <th>未去重UV数</th>
                <th>PV数</th>
                <th>其它PV总量</th>
                <th>时间</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
        </div>
        <table id="bootstrap-table" data-mobile-responsive="true"></table>
    </div>

<script>
    $(function () {
        platformIpCountPage.init();
    });
    var startTimes;
    var endTimes;
    var platformIpCountPage = {
        init:function () {
            var _this = this;
            _this.renderTime();
             _this.getPlatformList();
             _this.showTable();
             _this.getAllCountData();
        },
        renderTime:function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#TimeDate',
                range: true,
                position: 'fixed',
                change:function(value, date, endDate){

                }
            });
             startTimes = this.getTime(0);
             endTimes = this.getTime(0);
            $("#TimeDate").val(startTimes + ' - ' + endTimes);
        },
        getTime:function (num) {
            var _thisdate =new Date() - (1000*60 *60 *24*num)
            var date = new Date(_thisdate);
            var seperator1 = "-";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate;
            return currentdate;
        },
        setParams:function () {
            if(!$('#TimeDate').val()){
                    layer.msg('时间格式不对')
                    return;
               }
                startTimes = $('#TimeDate').val().split(' - ')[0]?$('#TimeDate').val().split(' - ')[0]:'';
                endTimes = $('#TimeDate').val().split(' - ')[1]?$('#TimeDate').val().split(' - ')[1]:'';
                console.log($('#platformId').val());
            var params = {
                startDate:startTimes,
                endDate:endTimes,
                platformId:$('#platformId').val() ||  ''
            };
            var minData;
            var maxData;
            if(params.startDate>params.endDate){
                maxData = params.startDate;
                minData = params.endDate;
                params.endDate = maxData;
                params.startDate = minData;
            }
            return params;
        },
        getPlatformList:function () {
            $.ajax({
                type : "get",
                url : baseURL+"platform/findAllPlatform",
                dataType : "json",
                success: function(data) {
                    if(data.code==0){
                        var _html = '<option value="">请选择平台</option>'
                        for(var i=0;i<data.platformList.length;i++){
                            _html = _html + '<option value="'+data.platformList[i].nickName+'">'+data.platformList[i].nickName+'</option>'
                        }
                        $('#platformId').html(_html);
                        $('#platformId').selectpicker('refresh');
                    }else{
                        layer.msg('数据获取失败');
                    }
                },
                error:function(){

                    layer.msg('数据获取失败');
                }
            });
        },
        reload:function () {
            var allRequestParams = this.setParams();
            //console.log(allRequestParams);
            this.getAllCountData();
            $('#bootstrap-table').bootstrapTable('refresh',{
                url:'https://ipreport.yifutangvip.net/ipRecord/getIpStatisticCountList',
                    query:allRequestParams
            });
        },
        getAllCountData:function () {
            var param = this.setParams();
            var _this = this;
            $.ajax({
                type : "get",
                url : "https://ipreport.yifutangvip.net/ipRecord/getIpStatisticCountTotal",
                dataType : "json",
                data:{
                    endDate:param.endDate
                },
                success: function(data) {
                    if(data.code==0){
                       _this.showAllCountDataTable(data.result);
                    }else{
                        layer.msg('数据获取失败');
                    }
                },
                error:function(){

                    layer.msg('数据获取失败');
                }
            });
        },
        showAllCountDataTable:function (data) {
              var str = '<tr><td>'+data.ipNorepCount+'</td><td>'+data.ipCount+'</td><td>'+data.uvNorepCount+'</td><td>'+data.uvCount+'</td><td>'+data.pvCount+'</td><td>'+data.otherPvCount+'</td><td>'+data.statisticTimeStr+'</td>';
              $("#tableData tbody").html(str);
        },
        showTable:function () {
            var allRequestParams = this.setParams();
            console.log(allRequestParams)
            $('#bootstrap-table')
                .bootstrapTable(
                    {
                        method : 'get', // 服务器数据的请求方式 get or post
                        url :'https://ipreport.yifutangvip.net/ipRecord/getIpStatisticCountList', // 服务器数据的加载地址
                        showRefresh : true,
                        showToggle : true,
                        showColumns : true,
                        //showExport :true,
                        sortable: true,
                        sortName:"userId",// 排序列名称
                        sortOrder: "desc",
                        iconSize : 'outline',
                        toolbar : '#exampleToolbar',
                        striped : true, // 设置为true会有隔行变色效果
                        dataType : "json", // 服务器返回的数据类型
                        pagination : true, // 设置为true会在底部显示分页条
                        // queryParamsType : "limit",
                        // //设置为limit则会发送符合RESTFull格式的参数
                        singleSelect : false, // 设置为true将禁止多选
                        // contentType : "application/x-www-form-urlencoded",
                        // //发送到服务器的数据编码类型
                        pageSize : 10, // 如果设置了分页，每页数据条数
                        pageNumber : 1, // 如果设置了分布，首页页码
                        // search : true, // 是否显示搜索框
                        //showColumns : false, // 是否显示内容下拉框（选择显示的列）
                        sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者
                        // "server"
                        queryParams : function(params) {
                            //console.log(params)
                            return {
                                // 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                                limit : params.limit,
                                page : (params.offset/params.limit) + 1,
                                platformId : allRequestParams.platformId,
                                startDate : allRequestParams.startDate,
                                endDate: allRequestParams.endDate
                            };
                        },
                       columns : [
                            {
                                checkbox : true
                            },
                           {
                               field : 'platformId',
                               align:'center',
                               title : '平台名称'
                           },
                            {
                                field : 'ipNorepCount',
                                align:'center',
                                title : '去重后IP数'
                            },
                            {
                                field : 'ipCount',
                                align:'center',
                                title : '未去重IP数'
                            },
                            {
                                field : 'uvNorepCount', // 列字段名
                                align:'center',
                                title : '去重后UV数',// 列标题
                            },
                            {
                                field : 'uvCount',
                                align:'center',
                                title : '未去重UV数'
                            },
                            {
                                field : 'pvCount',
                                align:'center',
                                title : 'PV数'
                            },
                           {
                                field : 'statisticTimeStr',
                                align:'center',
                                title : '时间'
                            }]
                    });
        }
    }
</script>

</body>

</html>